<template>
    <div>
        <!--     做一个选项卡，第一个卡片内容是一个学生管理，第二个内容是一个调查问卷，第三个内容是一个登陆页面，内容是一些图片。
    需要缓存第一个和第二个，第三个不缓存 -->
        <div class="Fath">
            <ul>
                <li v-for="(value,index) in sons" :key="index" @click="fn(index)">
                    {{ sons[index] }}
                </li>
            </ul>
        </div>

         <keep-alive exclude="Son3">
         <Son1 v-if="son === 0"></Son1>
         <Son2 v-else-if=" son === 1 "></Son2>
         <Son3 v-else></Son3>
         </keep-alive>
    </div>
</template>
<script>
import Son1 from "./Son1"
import Son2 from "./Son2"
import Son3 from "./Son3"
export default {
    data(){
        return{
            son:0,
            sons:["大儿子","二儿子","王小明"],
        }
    },
    methods:{
        fn(value){
            this.son = value;
        }
    },
    components:{Son1,Son2,Son3}
}
</script>
<style>
*{
    margin: 0;
    padding: 0;
}
li{
    text-decoration: none;
}
.Fath {
    width: 100%;
}
.Fath ul {
    padding: 20px 0 20px;
    width: 80%;
    text-align: center;
    margin: auto;
    background: rgb(243,243,243);
}
.Fath ul li{
    display: inline-block;
    width: 33%;
    font-size: 20px;
    padding: 10px 0 10px;
    border-left: 1px solid black;
}
</style>